// Global class for alerts that are displayed at the top of the page and take up
// the full width.
.site-alert {
    width: 100%;
    display: flex;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;

    flex: 0 0 auto;

    // Higher visibility.
    color: white;
    font-size: 16px;

    border-radius: 0;
    border-width: 0 0 1px;

    &__link {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        &:hover span.underline {
            text-decoration: underline;
        }

        &-icon {
            margin-right: 0.25rem;
        }
    }
}

.phabricator-alert {
    width: auto;
}

.sg-alert {
    border-radius: 0.25rem;
    padding: 0.5rem;
    color: #f2f4f8;

    &-success {
        border: 1px solid #37b24d;
        background: rgba(43, 138, 62, 0.5);
    }

    &-warning {
        border: 1px solid #f59f00;
        background: rgba(230, 119, 0, 0.5);
    }

    &-info {
        border: 1px solid #15aabf;
        background: rgba(#15aabf, 0.5);
    }

    &-danger {
        border: 1px solid #f03e3e;
        background: rgba(201, 42, 42, 0.5);
    }

    &-primary {
        border: 1px solid #2b3750;
        background: #1d2535;
    }

    a {
        text-decoration: underline;
        font-weight: bold;
        color: inherit;

        &:hover,
        &:focus {
            color: white;
        }
    }

    .btn-icon {
        &:hover,
        &:focus {
            color: white;
        }
    }
}
